/* 页面整体容器 */
.symptom-container {
  /* 基本布局 */
  display: flex;
  flex-direction: column;
  max-width: 100%;
  width: 100%;
  height: 100vh;
  /* 背景颜色 */
  background-color: #f9f6f2;
  /* 字体 */
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  /* 内容间距 */
  position: relative;
}

/* 顶部状态栏样式 */
.status-bar {
  /* 顶部状态栏布局 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  height: 24px;
}

/* 时间显示 */
.time {
  /* 字体设置 */
  font-size: 14px;
  font-weight: 500;
}

/* 状态图标组 */
.icons {
  /* 图标布局 */
  display: flex;
  gap: 5px;
}

/* 进度指示器容器 */
.progress-indicator {
  /* 水平排列 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
  padding: 0 60px;
}

/* 步骤样式 */
.step {
  /* 垂直排列 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 步骤点 */
.dot {
  /* 圆形点样式 */
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #e0e0e0;
  background-color: #fff;
  /* 居中显示内容 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* 已完成步骤点 */
.step.completed .dot {
  /* 绿色对勾标记 */
  background-color: #a3be8c;
  border-color: #a3be8c;
  color: white;
}

/* 当前步骤点 */
.step.active .dot {
  /* 绿色背景 */
  background-color: #a3be8c;
  border-color: #a3be8c;
}

/* 步骤标签 */
.label {
  /* 文本样式 */
  font-size: 12px;
  margin-top: 5px;
  color: #666;
}

/* 步骤连接线 */
.step-line {
  /* 连接线样式 */
  flex-grow: 1;
  height: 1px;
  background-color: #e0e0e0;
  margin: 0 5px;
}

/* 页面标题 */
.page-title {
  /* 文本样式 */
  font-size: 22px;
  font-weight: 600;
  color: #5a3e36;
  text-align: center;
  margin: 0 0 20px;
}

/* 搜索框容器 */
.search-container {
  /* 容器样式 */
  display: flex;
  align-items: center;
  margin: 0 20px 25px;
  position: relative;
}

/* 搜索输入框 */
.search-input {
  /* 输入框样式 */
  width: 100%;
  padding: 12px 45px 12px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 25px;
  font-size: 16px;
  background-color: white;
}

/* 搜索图标按钮 */
.search-icon {
  /* 图标样式 */
  position: absolute;
  right: 15px;
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* 区域标题 */
.section-title {
  /* 标题样式 */
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin: 0 0 10px 0;
}

/* 活跃症状区域 */
.active-symptoms-section {
  /* 区域样式 */
  padding: 0 20px;
  margin-bottom: 25px;
}

/* 症状标签容器 */
.symptoms-tags {
  /* 标签排列 */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 单个症状标签 */
.symptom-tag {
  /* 标签样式 */
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background-color: #f0f0f0;
  border-radius: 20px;
  font-size: 14px;
  color: #333;
}

/* 症状文本 */
.symptom-text {
  /* 文本样式 */
  cursor: pointer;
}

/* 删除标签按钮 */
.remove-tag {
  /* 按钮样式 */
  background: none;
  border: none;
  margin-left: 5px;
  font-size: 16px;
  line-height: 1;
  color: #999;
  cursor: pointer;
}

/* 评分区域 */
.score-section {
  /* 区域样式 */
  padding: 0 20px;
  margin-bottom: 25px;
}

/* 进度条满格时的闪光效果 */
@keyframes progressGlow {
  0% { box-shadow: 0 0 5px rgba(255, 138, 36, 0.3); }
  50% { box-shadow: 0 0 10px rgba(255, 138, 36, 0.6); }
  100% { box-shadow: 0 0 5px rgba(255, 138, 36, 0.3); }
}

/* 进度条容器 */
.score-progress {
  /* 容器样式 */
  margin-bottom: 10px;
}

/* 进度条背景 */
.progress-bar {
  /* 进度条基础样式 */
  width: 100%;
  height: 8px;
  background-color: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

/* 进度条填充 */
.progress {
  /* 填充部分样式 */
  height: 100%;
  background: linear-gradient(to right, #ff9a3c, #ff6b3c);
  border-radius: 4px;
  transition: width 0.3s ease-out;
}

/* 提示文本 */
.score-hint {
  /* 文本样式 */
  font-size: 14px;
  color: #999;
  margin: 5px 0 0;
}

/* 限制提示文本 */
.limit-hint {
  /* 红色警告文本 */
  font-size: 13px;
  color: #e53935;
  margin: 5px 0 0;
  font-weight: 500;
}

/* 症状列表覆盖层 */
.symptoms-list-overlay {
  /* 全屏覆盖 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
  /* 内容居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 症状列表容器 */
.symptoms-list-container {
  /* 容器样式 */
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 90%;
  max-width: 500px;
  max-height: 80%;
  overflow-y: auto;
  /* 位置设置 */
  z-index: 101;
}

/* 症状列表项 */
.symptom-list-item {
  /* 列表项布局 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  /* 底部边框 */
  border-bottom: 1px solid #f0f0f0;
}

/* 症状列表项最后一个元素取消底部边框 */
.symptom-list-item:last-child {
  /* 取消边框 */
  border-bottom: none;
}

/* 症状名称 */
.symptom-name {
  /* 文本样式 */
  font-size: 16px;
  color: #333;
}

/* 添加症状按钮 */
.add-symptom-button {
  /* 按钮样式 */
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: none;
  border: none;
  color: #666;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

/* 添加症状按钮悬停效果 */
.add-symptom-button:hover {
  /* 悬停样式 */
  background-color: #f5f5f5;
  border-color: #ccc;
}

/* 功能按钮区 */
.function-buttons {
  /* 按钮区排列 */
  display: flex;
  justify-content: center;
  gap: 30px;
  padding: 10px 0;
  margin-top: auto;
  margin-bottom: 20px;
}

/* 单个功能按钮 */
.function-button {
  /* 按钮样式 */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

/* 设置按钮 */
.function-button.settings {
  /* 棕色背景 */
  background-color: #5a3e36;
  color: white;
}

/* 搜索按钮 */
.function-button.search {
  /* 绿色背景 */
  background-color: #a3be8c;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 笔记按钮 */
.function-button.notes {
  /* 棕色背景 */
  background-color: #5a3e36;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 下一步按钮 */
.next-button {
  /* 按钮样式 */
  width: 90%;
  max-width: 300px;
  margin: 0 auto 30px;
  padding: 15px 0;
  border-radius: 25px;
  background-color: #5a3e36;
  color: white;
  border: none;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* 下一步按钮悬停效果 */
.next-button:hover {
  /* 悬停效果 */
  background-color: #4a3329;
} 